import React, { useState, useEffect } from 'react'
import marked from 'marked'
import '../static/css/AddArticle.css'
import { Row, Col, Input, Button, DatePicker, Select, message} from 'antd'
import axios from 'axios'
import servicePath from '../config/api'

const { Option } = Select
const { TextArea } = Input

function AddArticle (props) {
  const [articleId,setArticleId] = useState(0)  // 文章的ID，如果是0说明是新增加，如果不是0，说明是修改
  const [articleTitle,setArticleTitle] = useState('')   //文章标题
  const [articleContent , setArticleContent] = useState('')  //markdown的编辑内容
  const [markdownContent, setMarkdownContent] = useState('预览内容') //html内容
  const [introducemd,setIntroducemd] = useState()            //简介的markdown内容
  const [introducehtml,setIntroducehtml] = useState('等待编辑') //简介的html内容
  const [showDate,setShowDate] = useState()   //发布日期
  const [updateDate,setUpdateDate] = useState() //修改日志的日期
  const [typeInfo ,setTypeInfo] = useState([]) // 文章类别信息
  const [selectedType,setSelectType] = useState('请选择类型') //选择的文章类别

  const changeContent = (e) => {
    setArticleContent(e.target.value)
    let html = marked(e.target.value)
    setMarkdownContent(html)
  }

  const changeIntroduce = (e) => {
    setIntroducemd(e.target.value)
    let html = marked(e.target.value)
    setIntroducehtml(html)
  }

  useEffect(() => {
    getTypeInfo()

    let id = props.match.params.id
    if (id) {
      setArticleId(id)
      upArticle(id)
    }
    

  }, [])

  const getTypeInfo = () => {
    axios({
      method: 'get',
      url: servicePath.getTypeInfo,
      withCredentials: true
    }).then(res => {
      if (res.data.data == '没有登录') {
        localStorage.removeItem('openId')
        props.history.push('/')
      } else {
        setTypeInfo(res.data.data)
      }
    })
  }

  const selectType = (value) => {
    setSelectType(value)
  }

  const saveArticle = () => {
    if (!selectedType) {
      message.error('请选择文章类型')
      return false
    } else if (!articleTitle) {
      message.error('文章标题不能为空')
      return false
    } else if (!articleContent) {
      message.error('文章内容不能为空')
      return false
    } else if (!introducemd) {
      message.error('文章简介不能为空')
      return false
    } else if (!showDate) {
      message.error('发布日期不能为空')
      return false
    }
    
    let dataProps = {
      type_id: selectedType,
      article_content: articleContent,
      title: articleTitle,
      introduce: introducemd,
    }
    const newDate = showDate.replace('-', '/')
    dataProps.addTime = (new Date(newDate).getTime()) / 1000
    console.log(articleId)
    if (articleId == 0) {  // 添加文章信息
      dataProps.view_count = Math.ceil(Math.random()*100)
      axios({
        method: 'post',
        url: servicePath.addArticle,
        withCredentials: true,
        data: dataProps
      }).then(res => {
        setArticleId(res.data.insertId)
        if (res.data.success == true) {
          message.success('文章发布成功')
        } else {
          message.error('文章发布失败')
        }
      })
    } else {  //修改文章信息
      dataProps.id = articleId
      axios({
        method: 'post',
        url: servicePath.updateArticle,
        data: dataProps,
        withCredentials: true
      }).then(res => {
        if (res.data.success === true) {
          message.success('文章修改成功')
        } else {
          message.error('文章修改失败')
        }
      })
    } 
    

  }

  // 获取Id修改文章详细内容
  const upArticle = (id) => {
    axios(servicePath.getArticleById + id,{withCredentials: true})
      .then(res => {
        console.log(res.data)
        let articleInfo = res.data.data[0]
        setArticleTitle(articleInfo.title)
        setIntroducemd(articleInfo.introduce)
        let html1 = marked(articleInfo.introduce)
        setIntroducehtml(html1) 
        setArticleContent(articleInfo.article_content)
        let html2 = marked(articleInfo.article_content)
        setMarkdownContent(html2)
        setShowDate(articleInfo.addTime)
        setSelectType(articleInfo.typeId)
      })
  }


  marked.setOptions({
    renderer: new marked.Renderer(),
    gfm: true,
    pedantic: false,
    sanitize: false,
    tables: true,
    breaks: false,
    smartLists: true,
    smartypants: false,
  }); 

  return (
    <div>
      <Row gutter={5}>

        <Col span={18}>
          <Row gutter={20}>
            <Col span={20}>
              <Input 
                value={articleTitle}
                placeholder='博客标题'
                size='large'
                onChange={(e) => setArticleTitle(e.target.value)}
              />
            </Col>
            <Col span={4}>
              <Select defaultValue={selectedType} onChange={selectType} size='large'>
                {
                  typeInfo.map((item,index) => {
                    return (<Option key={index} value={item.Id}>{item.typeName}</Option>)
                  })
                }
                
              </Select>
            </Col>
          </Row>
          <br/>
          <Row gutter={20}>
            <Col span={12}>
              <TextArea 
                className="markdown-content"
                rows={28}
                placeholder='文章内容'
                value={articleContent}
                onChange={changeContent}
              />
            </Col>
            <Col span={12}>
              <div className='show-html'
                dangerouslySetInnerHTML={{__html:markdownContent}}
              ></div>
            </Col>
          </Row>
        </Col>

        <Col span={6}>
          <Row>
            <Col span={24}>
              <Button size='large'>暂存文章</Button>&nbsp;
              <Button type='primary' size='large' onClick={saveArticle}>发布文章</Button>
              <br/>
            </Col>
            <Col span={24}>
              <br/>
              <TextArea
                rows={4}
                placeholder='文章简介'
                value={introducemd}
                onChange={changeIntroduce}
              >
              </TextArea>
              <br/><br/>
              <div className="introduce-html"
                dangerouslySetInnerHTML={{__html:introducehtml}}
              ></div>
            </Col>
            <Col span={12}>
              <div className='date-select'>
                <DatePicker 
                  onChange={(date,dateString) => setShowDate(dateString)}
                  placeholder='发布日期'
                  size='large'
                />
              </div>
            </Col>
          </Row>
        </Col>

      </Row>
    </div>
  )
}

export default AddArticle